<template>
  <div class="append" @touch="handleCancleClick" ref="wrapper">
    <div class="ad">
      <div class="ad-button" @click="handleCancleClick">返回标准模式</div>
        <div class="table">
            <tr v-if="this.listTitle.length">
               <th class="table-item" v-for="(item, index) of listTitle" :key="index" :class="{appear: item === 'cId'}">{{item}}</th>
               <th class="table-item alter">编辑</th>
            </tr>
            <tr v-for="(person, index) of listData" :key="index" ref="index">
               <th class="table-item" v-for="(item, index, key) of person.cInfo"
               :key="key" :class="{appear: key === 'cId'}">
                  <span :class="{file: key >= listTitle.length - flen}"
                        @click = "handlelookClick(item, key)">{{item}}</span>
                </th>
              <th class="table-item delete">
                <div v-if="show">
                  <button class="item-button" @click="handleVoteClick('11', person.cId, index, $event)">同意</button>
                  <button class="item-button" @click="handleVoteClick('01', person.cId, index, $event)">弃权</button>
                  <button class="item-button" @click="handleVoteClick('00', person.cId, index, $event)">反对</button>
                </div>
                <div v-else>
                  <input class=" ipt item-desc" type="text" :ref="index"
                  placeholder="请评分"v-model="tmp[index]"
                  @blur="handleJudgeBlur(person.cId, tmp[index], index)"
                  @focus="handleJudgeClick"
                  >
                </div>
             </th>
          </tr>
        </div>
         <!-- 投票 -->
        <div v-if="show"  class="submit" @click="handleSubmit">提交 完成投票</div>
        <!-- 评分· -->
        <div v-if="!show"  class="submit" @click="handleSubClick">提交 完成投票</div>
    </div>
</div>
</template>

<script>
import pdf from 'vue-pdf'
import Bscroll from 'better-scroll'
import axios from 'axios'
import { mapState } from 'Vuex'
export default {
  name: 'CandidateList',
  props: {
    listData: Array,
    listTitle: Array,
    schema: String,
    flen: Number
  },
  data () {
    return {
      // schema: '00',
      select: [],
      delete: [],
      result: [],
      show: '',
      tmp: [],
      status: false
      // listData: this.listData,
      // titleList: this.listTitle
    }
  },
  methods: {
    handleCancleClick () {
      this.$emit('cancle')
    },
    handlelookClick (item, index) {
        console.log(this.listTitle.length - this.flen)
       console.log(index)
      if (index >= this.listTitle.length - this.flen) {
        // var url = 'http://192.168.43.188:8081/preview/' + item //要预览文件的访问地址,后端插件
        var url = 'http://192.168.43.188:8080/file/' + item
        // window.location = 'http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url)
        // window.open('http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url), '', 'width=400,height=300')
        // window.history.pushState('file', '', 'http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url))
        plus.runtime.openWeb('http://192.168.43.188:8012/onlinePreview?url='+encodeURIComponent(url))
      } else {
        return;
      }
    },
    ChangeColor (params, id, index, event) {
      let score = {cId: id, cScore: params}
      const target = event.target.style.background
      event.target.style.background = target=== 'rgb(204, 204, 204)'? '#00bcd4' : 'rgb(204, 204, 204)'
      if (event.target.style.background === 'rgb(204, 204, 204)') {
        this.result[index] = score
      } else if (event.target.style.background === 'rgb(0, 188, 212)') {
        this.result[index] = ''
      }
      let count = 0
      this.result.forEach((item) => {
        if (item) { count++ }
      })
      this.$emit('change', count)
    },
    handleVoteClick (params, id, index, event) {
      if (this.canPoll) {
        if (this.result.length === 0 ||this.result[index] === undefined ||this.result[index].cScore === params || this.result[index] === '' ) {
          this.ChangeColor (params, id, index, event)
        } else {
          swal('您已选择，如有需要请取消后重新选择', '', 'warning')
        }
      } else {
        //  if (this.result.length === 0 ||this.result[index] === undefined ||this.result[index].cScore === params || this.result[index] === '' ) {
        //   this.ChangeColor (params, id, index, event)
        // } else {
        //   swal('您已选择，如有需要请取消后重新选择', '', 'warning')
        // }
        swal('查询到您可能存在着严重的刷票行为，请重启软件重新投票', '', 'error')
      }
    },
    handleSubmit () {
      const result2 = []
      this.result.forEach((item) => {
        if (item) {
          result2.push(item)
        }
      })
      axios.post('http://192.168.43.188:8081/subVoteResult', {
        'vid': this.voteId,
        // 'mode': this.schema,
        'arr': result2
      }).then(({status, data}) => {
        // console.log(data)
        if (data.msg === '成功完成投票') {
          swal('Info:' + data.msg, '', 'success')
          this.$router.push('/vote')
        } else{
          swal(data.msg, '', 'warning')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    handleJudgeClick () {
      this.status = true
    },
    JudgeBlur (score, id, value, index, min, max) {
      // console.log(score)
      if (score.cScore >= min && score.cScore <= max && score.cId) {
        this.result[index] = score
        let count = 0
        this.result.forEach((item) => {
          if (item) { count++ }
        })
        this.$emit('change', count)
      } else {
        swal('亲，您输入的分数没有在' + min + '-' + max + '之间，请重新输入', '', 'error')
        this.tmp[index] = ''
      }
    },
    handleJudgeBlur (id, value, index) {
      if (this.status) {
        let score = {cId: id, cScore: value}
        if (this.schema === '00') {
          this.JudgeBlur (score, id, value, index, 0, 100)
        } else if (this.schema === '01') {
          this.JudgeBlur (score, id, value, index, 60, 100)
        } else if (this.schema === '02') {
          this.JudgeBlur (score, id, value, index, 80, 100)
        }
      }
        // console.log(this.result)
        this.status = false
      },
    handleSubClick () {
      axios.post('http://192.168.43.188:8081/subMarkResult', {
        'vid': this.voteId,
        'mode': this.schema,
        'arr': this.result
      }).then(({status, data}) => {
        // console.log(data)
        if (data.msg === '成功完成评分') {
          swal('Info:' + data.msg, '', 'success')
          this.$router.push('/vote')
        } else{
          swal(data.msg, '', 'warning')
        }
      }).catch((error) => {
        swal('Info' + error, '', 'error')
      })
    },
    handlegetNotice ()
      {
      axios.post('http://192.168.43.188:8081/getNotice', {
        'vid': this.themeId
      }).then(({status, data}) => {
        if (status === 200) {
          // console.log(data)
          data = data.info
          swal('' + data.vcTheme,
           '监票人：' + data.vcSname + ',计票人：'+ data.vcTname + ', 胜选人数：' + data.vcWinnum,
           'info')
        }
      })
    }
  },
  computed: {
    ...mapState(['userId']),
    ...mapState(['canPoll']),
    ...mapState(['voteId']),
    ...mapState(['themeId'])
  },
  updated () {
    // this.$nextTick(() => {
    if (this.schema === '11') {
      this.show = true
      // console.log('投票模式')
    } else if (this.schema === '00') {
      this.show = false
      // console.log('评分模式0 - 100')
    } else if (this.schema === '01') {
      this.show = false
      // console.log('评分模式60 - 100')
    } else if (this.schema === '02') {
      this.show = false
      // console.log('评分模式80 - 100')
    }
  // })
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapper, {click: true})
    this.handlegetNotice()
  }
}
</script>

<style lang="stylus" scoped>
@import '~style/variable.styl'
.append
    z-index: 2
    overflow: hidden
    position: absolute
    left: 0
    right: 0
    top: 0
    bottom: 0
    background: rgba(0, 0, 0, .6)
  .ad
      border: .02rem solid #000
      background: #fff
      margin-top: 1rem
      text-align: center
      padding: 0 .5rem
      .ad-title
          background: $bgcolor
          color: #fff
          line-height: $height
          text-align: center
          margin-bottom: .5rem
      .ad-button
          overflow: hidden
          // display: block
          background: $bgcolor
          font-size: .32rem
          padding: .2rem .4rem
          margin: 2rem .6rem .6rem .6rem
          border-radius: .1rem
          color: #fff
      .table
          background: #fff
          margin-top: .5rem
          width: 100%
          .table-item
              border: .02rem solid #aaa
              width: 5.5rem
              // width: 23.95% /* 设置百分比失效 */
              height: .5rem
              line-height: .5rem
              padding: .2rem .0rem
          .alter
              // color: $bgcolor
              // .delete
              width: 9rem
          .appear
             display: none
          .item-button
            box-sizing: border-box
            background: $bgcolor
            line-height: .4rem
            font-size: .34rem
            color: #fff
            border-radius: .1rem
            width: 30%
            margin: .1rem 0 -.1rem 0
            padding: .1rem .1rem
          .ipt
            width: 100%
.file
    color: $green
.submit
    box-sizing: border-box
    background: $pink
    line-height: 1.5rem
    font-size: .38rem
    color: #fff
    border-radius: .1rem
    width: 100%
    margin: .1rem 0  2rem 0
    text-align: center
</style>
